import { dom, Nodes } from '@knno/dom';
import { actionQueue } from '../../tools/actionQueue';
import { toastStyle } from './toast.css';

class ToastBox {
	private toast: Nodes;
	constructor(msg: string) {
		this.toast = dom.div(toastStyle).append(dom.div().text(msg));
	}
	create() {
		this.toast.appendTo(document.body);
	}
	show() {
		this.toast.addClass('active');
	}
	hide() {
		this.toast.removeClass('active');
	}
	destory() {
		this.toast.detach();
	}
}

const toastQueue = actionQueue<ToastBox>(500);
export const Toast = {
	show(msg: string) {
		toastQueue.show(new ToastBox(msg), 2000);
	},
};
